import { sendMessageToParent } from "@/utils";
import { Button, Card, Divider, Flex, Input, List, Space, Typography } from "antd";
import dayjs from "dayjs";
import { type } from "ramda";
import { useEffect, useRef, useState } from "react";

const SendIndex = () => {
  const childWin = useRef()
  const [isOpener, setIsOpener] = useState(false)
  const [isChildWin, setIsChildWin] = useState(false)
  const [sendList, setSendList] = useState([])
  const [receiveList, setReceiveList] = useState([])
  const [messageVal, setMessageVal] = useState('')
  useEffect(() => {
    setIsOpener(window.opener ? true : false)
  }, [])
  const handleTest = () => {
    // window.open('http://localhost:3001/integration/index?menuUrl=http://localhost:3001/integration/log/operlog')
    sendMessageToParent({
      // url: 'http://localhost:3001/integration/iot/dict',
      type: 'routerTo',
      url: '/integration/iot/dict',
      routerMethod: 2,
      openMethod: 1
    })
  }

  const handleOpenChild = () => {
    sendMessageToParent({
      type: 'routerTo',
      url: location.origin + '/integration/test/testMessage',
      routerMethod: 1,
      openMethod: 2,
      openParams: ['_blank', 'left=200,top=100,width=800,height=600']
    })

    // window.top.postMessage({
    //   type: 'routerTo',
    //   url: 'http://192.168.16.129:30001/integration/test/testMessage',
    //   routerMethod: 1,
    //   openMethod: 2
    // }, '*')

    // if (window.openWindow) {
    //   childWin.current = window.openWindow(`${location.origin}/integration/index?menuUrl=${location.origin}/test/testMessage`)
    //   setIsChildWin(true)
    // }
  }
  const handleSend = () => {
    let data = {
      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      data: messageVal
    }
    setSendList(ol => [...ol, data])
    window.top.postMessage(data, '*')
  }

  // 监听子窗口或者iframe发来的消息
  const receiveWindowMessage = (event) => {
    //判断事件来源是不是当前页面，是的话跳过，防止事件冲突
    if (event.source === window) return
    setReceiveList(ol => [...ol, event.data])
  }

  useEffect(() => {
    window.addEventListener('message', receiveWindowMessage, false)
    return () => {
      window.removeEventListener('message', receiveWindowMessage)
    }
  }, [])

  return (<div style={{ padding: 16 }}>
    <Flex justify="center" align="center">
      <Typography.Title style={{ marginBottom: 0 }} level={2}>{isOpener ? '子窗口' : '父窗口'}</Typography.Title>
      {
        !isOpener && !isChildWin && <Space>
          <Button type="primary" onClick={handleOpenChild}>打开新窗口</Button>
        </Space>
      }
    </Flex>
    <Divider />
    <Card>
      <Flex justify="space-between" align="center" style={{ paddingBottom: 10 }}>
        <Typography.Title level={4}>发送消息列表</Typography.Title>
        <Space>
          <Input value={messageVal} onInput={(e) => setMessageVal(e.target.value)} placeholder="请输入要发送的消息" />
          <Button type="primary" onClick={handleSend}>发送到窗口</Button>
        </Space>
      </Flex>

      <List
        dataSource={sendList}
        bordered
        renderItem={(item) => (
          <List.Item key={item.time}>
            <Typography.Text mark>[{item.time}]</Typography.Text> {item.data}
          </List.Item>
        )}
      ></List>
    </Card>

    <Card>
      <Flex justify="space-between" align="center" style={{ paddingBottom: 10 }}>
        <Typography.Title level={4}>接收消息列表</Typography.Title>
      </Flex>

      <List
        dataSource={receiveList}
        bordered
        renderItem={(item) => (
          <List.Item key={item.time}>
            <Typography.Text mark>[{item.time}]</Typography.Text> {item.data}
          </List.Item>
        )}
      ></List>
    </Card>
  </div >);
}

export default SendIndex;